<template>
  <view class="card">
    <view class="card-header">
      <text class="title">{{ task.title }}</text>
      <text :class="statusClass">{{ statusText }}</text>
    </view>

    <view class="card-body">
      <info-item icon="location" :label="`${task.from} → ${task.to}`" />
      <info-item icon="time" :label="task.time" />
      <info-item icon="people" :label="`${task.people}人`" />
      <info-item icon="car" :label="task.car" />
      <info-item
        v-if="completed"
        icon="distance"
        :label="`行驶里程: ${task.distance}公里`"
      />
    </view>

    <view class="card-footer">
      <button plain size="mini" @tap.stop="$emit('detail')">
        查看详情
      </button>
      <button
        v-if="!completed"
        type="primary"
        size="mini"
        @tap.stop="acceptTask"
      >
        {{ task.status === 0 ? '接受任务' : '完成任务' }}
      </button>
    </view>
  </view>
</template>

<script>
import infoItem from './info-item.vue'
export default {
  components: { infoItem },
  props: {
    task: { type: Object, required: true },
    completed: { type: Boolean, default: false }
  },
  computed: {
    statusText() {
      return ['待接单', '进行中', '已完成'][this.task.status]
    },
    statusClass() {
      return [
        'status',
        ['status-pending', 'status-progress', 'status-done'][this.task.status]
      ]
    }
  },
  methods: {
    acceptTask() {
      if (this.task.status === 0) {
        uni.showToast({ title: '已接单' })
        // 业务逻辑……
      } else {
        uni.navigateTo({ url: '/pages/complete/complete' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$primary: #1e90ff;

.card {
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  .title {
    font-size: 34rpx;
    font-weight: bold;
  }
  .status {
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    &.status-pending {
      background: #fff3cd;
      color: #856404;
    }
    &.status-progress {
      background: #e6f7ff;
      color: $primary;
    }
    &.status-done {
      background: #d1e7dd;
      color: #0f5132;
    }
  }
}
.card-body {
  padding: 20rpx 30rpx;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}
</style>